<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='用户管理',active=''">
<head th:replace="/header::headerFragment(title,active)"></head>
<body>
<div th:replace="/header::header-body"></div>
<div class="container-fluid bg-info">
  <div class="row">

    <div th:replace="/leftnav::leftnav"></div>

    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
      <div class="row" style="padding: 20px 0 0 40px">
        <button  type="button" class="btn btn-primary col-2" data-toggle="modal" data-target="#addModal">
          新增用户
        </button>
        <!-- Large modal -->

        <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <h1>sdfffff</h1>
            </div>
          </div>
        </div>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Launch modal</button>



        <div class="col-lg-6">
          <form action="find_users" method="get">
            <div class="input-group">
              <input type="text" class="form-control" name="find_users" id="find_users" placeholder="搜索用户...">
              <span class="input-group-btn">
               <button class="btn btn-default" type="submit">搜索!</button>
            </span>
            </div><!-- /input-group -->

          </form>

        </div><!-- /.col-lg-6 -->
      </div>







      <form id="edit_user_form" class="was-validated" enctype="multipart/form-data" method="post">
        <!-- 修改分类模态框 -->
        <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">

              <!-- 模态框头部 -->
              <div class="modal-header">
                <h4 class="modal-title">修改用户信息</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              </div>

              <!-- 模态框内容 -->
              <div class="modal-body">
                <input type="hidden" class="form-control" id="user_id" name="user_id">
                <div class="mb-3 mt-3">
                  <label for="user_name" class="form-label">用户名</label>
                  <input type="text" class="form-control" id="user_name" placeholder="用户名" name="user_name">
                </div>
                <div class="mb-3 mt-3">
                  <label for="user_pass" class="form-label">密码</label>
                  <input type="text" class="form-control" id="user_pass" placeholder="密码" name="user_pass">
                </div>
                <div class="mb-3 mt-3">
                  <label for="user_email" class="form-label">邮箱</label>
                  <input type="text" class="form-control" id="user_email" placeholder="邮箱" name="user_email">
                </div>
                <div class="mb-3 mt-3">
                  <label for="user_rank" class="col-sm-2 control-label">身份</label>
                  <div class="col-sm-10" id="user_rank">
                    <input type="radio" name="user_rank" id="radio3" value="1" > 管理员
                    <input type="radio" name="user_rank" id="radio4" value="0" checked>用户
                  </div>
                </div>
              </div>
              <!-- 模态框底部 -->
              <div class="modal-footer">
                <button type="button" class="btn btn-success" onclick="updateUser108()">提交</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
              </div>

            </div>
          </div>
        </div>
      </form>

      <form id="add_form" class="was-validated" enctype="multipart/form-data" method="post">
        <!-- 新增分类模态框 -->
        <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">

              <!-- 模态框头部 -->
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">新增用户</h4>
              </div>

              <!-- 模态框内容 -->
              <div class="modal-body">
                <div class="form-group">
                  <label for="new_user_name" class="col-sm-2 control-label">
                    用户名称
                  </label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="new_user_name" placeholder="请输入用户名" name="user_name"/>
                  </div>
                </div>
                <div class="form-group">
                  <label for="new_user_pass" class="col-sm-2 control-label">用户密码</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="new_user_pass" placeholder="请输入密码" name="user_pass"/>
                  </div>
                </div>
                <div class="form-group">
                  <label for="new_user_email" class="col-sm-2 control-label">邮箱</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="new_user_email" placeholder="请输入年龄" name="user_email" />
                  </div>
                </div>
                <div class="form-group">
                  <label for="new_user_rank" class="col-sm-2 control-label">是否为管理员</label>
                  <div class="col-sm-10" id="new_user_rank">
                    <input type="radio" name="user_rank" id="optionsRadios1" value="1" > 管理员
                    <input type="radio" name="user_rank" id="optionsRadios2" value="0" checked>普通用户
                  </div>
                </div>

              </div>
              <!-- 模态框底部 -->
              <div class="modal-footer">


                <button type="button" class="btn btn-primary" onclick="addUser108()">提交</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>

              </div>

            </div>
          </div>
        </div>
      </form>

      <script th:inline="javascript">
        // 通过id获取修改的商品信息
        function getUserInfo108(id,name,pass,email,rank) {
          $("#user_id").val(id);
          $("#user_name").val(name);
          $("#user_pass").val(pass);
          $("#user_email").val(email);
          $("#user_rank").val(rank);
        }

        // 修改商品分类
        function updateUser108() {
          $.ajax({
            url: "updateUser108",
            type: "POST",//方法类型
            cache: false,
            processData: false,
            contentType: false,
            dataType: "json",
            data: new FormData($('#edit_user_form')[0]),
            success: function (data) {
              // alert(data);
              if (data.result == "success") {
                alert(data.msg);
                window.location.reload();
              } else {
                alert(data.msg);
              }
            }, error: function (xhr, status, error) {
              alert("请求失败!" + status);
            }
          });
        }

        /*新增商品分类
        * 使用formData数据格式提交form表单数据，该格式主要针对input=file，上传文件时使用。
        * 如何ajax提交数据未formData格式，必须定义以下两个参数值。 processData: false 表示不使用applicati/x-www-form-urlencode。
        * contentType: false 表示不采用默认的数据类型
        */
        function addUser108() {
          $.ajax({
            url:"addUser108",
            type: "POST",//方法类型
            cache : false,
            processData: false,
            contentType: false,
            dataType:"json",
            data: new FormData($('#add_form')[0]),
            success: function(data){
              // alert(data);
              if(data.result=="success"){
                alert(data.msg);
                window.location.reload();
              }else{
                alert(data.msg);
              }
            },error:function(xhr,status,error){
              alert("请求失败!!!"+status);
            }
          });
        }

      </script>

      <!--//面板-->
      <div class="panel panel-default" style="padding: 20px 0 0 40px">
        <!-- Default panel contents -->
        <div class="panel-heading"><h3>用户列表</h3></div>
        <!-- Table -->
        <table class="table table-bordered table-striped table-hover">
          <thead>
          <tr>
            <td>用户名</td>
            <td>邮箱</td>
            <td>用户密码</td>
            <td>用户身份</td>
            <td>操作</td>
          </tr>
          </thead>
          <tbody>
          <!--        each循环-->
          <tr th:id="${user.user_id}" th:each="user : ${userlist.list}">

            <td><th:block th:text="${user.user_name}"></th:block></td>
            <td><th:block th:text="${user.user_email}"></th:block></td>
            <td><th:block th:text="${user.user_pass}"></th:block></td>
            <td>
              <th:block th:if="${user.user_rank}" th:text="管理员"></th:block>
              <th:block th:if="${user.user_rank}eq'0'" th:text="普通用户"></th:block>
              <th:block th:if="${user.user_rank}eq''" th:text="是空值"></th:block>

            </td>

            <td>
              <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#updateModal"
                      th:data-id="${user.user_id}" th:data-name="${user.user_name}" th:data-pass="${user.user_pass}"
                      th:data-email="${user.user_email}"
                      th:data-rank="${user.user_rank}"
                      onclick= "getUserInfo108(this.getAttribute('data-id'),this.getAttribute('data-name'),this.getAttribute('data-pass'),
                        this.getAttribute('data-email'),this.getAttribute('data-rank'))">
                修改
              </button>
              <a th:href="@{'deleteUser_108/'+${user.user_id}}" class="btn btn-danger">删除</a>
            </td>

          </tr>

          </tbody>
        </table>
      </div>

      <!-- 文章分页信息 -->

      <div class="row">
        <nav th:if="${search}eq'flase'" aria-label="Page navigation" id="no_search">
          <ul class="pagination justify-content-center">
            <li class="page-item" th:if="${userlist.hasPreviousPage}" >
              <a class="page-link" th:href="@{'?page='+${userlist.prePage}}" >上一页</a>
            </li>
            <li th:class="${nav==userlist.pageNum}?'page-item active':'page-item'" th:each="nav : ${userlist.navigatepageNums}">
              <a class="page-link" th:href="@{'?page='+${nav}}" th:text="${nav}"></a> </li>

            <li class="page-item" th:if="${userlist.hasNextPage}">
              <a class="page-link" th:href="@{'?page='+${userlist.nextPage}}">下一页</a>
            </li>

          </ul>
        </nav>
        <!--        th:value="${param.find_images}" 可以拿到url里面的参数-->
        <!--        先在上层标签使用th:with="code=${param.code}"将param中的值读取为局部变量。-->
        <!--        然后再将使用局部变量给自定义attribute赋值th:code="${code}"-->
        <!--        结构类似-->
        <nav th:if="${search}eq'true'" aria-label="Page navigation" id="search" th:with="find_users=${param.find_users}">
          <ul class="pagination justify-content-center">
            <li class="page-item" th:if="${userlist.hasPreviousPage}">
              <a class="page-link" th:href="@{'?find_users='+${find_users}+'&page='+${userlist.prePage}}" >上一页</a>
            </li>
            <li th:class="${nav==userlist.pageNum}?'page-item active':'page-item'" th:each="nav : ${userlist.navigatepageNums}">
              <a class="page-link" th:href="@{'?find_users='+${find_users}+'&page='+${nav}}" th:text="${nav}"></a> </li>

            <li class="page-item" th:if="${userlist.hasNextPage}" >
              <!--              <input type="text" id="find_images12" th:value="${param.find_images}">-->
              <a class="page-link" th:href="@{'?find_users='+${find_users}+'&page='+${userlist.nextPage}}">下一页</a>
            </li>

          </ul>
        </nav>

      </div>

    </div>

  </div>
</div>



<div th:replace="/footer::footer"></div>
</body>
</html>